<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <button id="btn">销毁</button>
    <script src="./vue.js"></script>
    <script>
        //面试题：首次加载组件触发 前四个生命周期  beforeCreate created beforeMount mounted

        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "过年好"
                }
            },
            methods: {
                say() {
                    alert("哈哈哈")
                }
            },
            beforeCreate() { //vue实例创建前的钩子函数
                // 根元素未准备就绪  数据未初始化 函数未初始化
                // 可以改变ui界面
                // console.log(this.$el) //$el获取vue实例根元素
                // console.log(this.msg)
                // this.say()
            },
            created() { //vue实例创建后
                // 根元素未准备就绪，数据准备就绪，函数准备就绪
                // 不能直接操作dom
                // 可以完成前后端交互操作
                // console.log(this.$el) //$el获取vue实例根元素
                // console.log(this.msg)
                // this.say()
            },
            beforeMount() { //vue组件挂载前
                // 根元素未准备就绪，数据准备就绪，函数准备就绪
                // 不能直接操作dom
                // console.log(this.$el) //$el获取vue实例根元素
                // console.log(this.msg)
                // this.say()
            },
            mounted() { //vue组件挂载完成
                // 根元素准备就绪，数据准备就绪，函数准备就绪
                // 可以操作dom
                console.log(this.$el) //$el获取vue实例根元素
                console.log(this.msg)
                this.say()
                this.msg = "大哥大姐";
            },
            beforeUpdate() { //vue组件更新前
                // 触发条件   更新数据 后dom 更新 
                console.log("更新前")
            },
            updated() { //vue组件更新后
                console.log("更新后")
            },
            beforeDestroy() { //vue组件销毁前
                // 传参操作，移除本页面的绑定的事件，显示隐藏ui
                console.log("销毁前")
            },
            destroyed() { //vue组件销毁后
                console.log("销毁后")
            }
        })

        var btn = document.getElementById("btn");
        btn.onclick = function() {
            vm.$destroy(); //强制销毁vue实例
            vm.msg = "8888"
        }
    </script>
</body>

</html>